<template>
    <div class="aside">
        <div class="icon">
            <!-- 问卷调研图标 -->
            <img class="questionnaire" src="../assets/img/icon/questionnaire.svg" alt="">
        </div>
        <div class="icon">
            <!-- 客服图标 -->
            <img class="service" src="../assets/img/icon/service.png" alt="">
        </div>
        <div class="icon">
            <!-- 置顶图标 -->
            <img class="topping" src="../assets/img/icon/topping.svg" alt="">
        </div>
    </div>
</template>

<style lang="scss" scoped>
.aside {
    text-align: right;
    width: 100px;
    height: 160px;
    position: fixed;
    bottom: 20px;
    right: 60px;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-between;
    z-index: 10000;

    .icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #d9d9d9;
        cursor: pointer;
    }

    .icon:not(:nth-child(2)):hover {
        background-color: #999da3;
    }

    .icon:first-child:hover {
        background-color: #999da3;
    }

    .icon:last-child:hover {
        background-color: #999da3;
    }
}

// 问卷调研图标样式
.questionnaire{
    position: absolute;
    top:8px;
    // left:0;
    right: 8px;
}

// 客服图标样式
.service{
    width: 24px;
    height: 24px;
    position: absolute;
    top: 68px;
    right: 8px;
}

// 置顶图标样式
.topping{
    position: absolute;
    top: 128px;
    right: 8px;
}
</style>